<script lang="ts" setup>
import lodash from 'lodash'
import { Checkbox, NavBar, Field, ActionBar, ActionBarButton,showSuccessToast, showFailToast } from 'vant'
import { JobRecordApi } from '~/api/JobRecordApi'
import { ContactModel } from '~/model'
import { JobAction, JobRecordModel } from '~/model/JobRecordModel'
import { ScheduleModel } from '~/model/ScheduleModel'
import PairsView from '~/components/common/PairsView.vue'
import moment from 'moment'
import { pickDate, protectedAction } from '~/utils'

const router = useRouter()
const records = ref([] as JobRecordModel[])
const pauseDays = ref(1)
const pauseDate = ref(new Date())

onMounted(() => {
  JobRecordApi.getAll()
    .then((res) => {
      records.value = res
      records.value.sort((a, b) => b.id - a.id)
    })
})

const recordsGrouped = computed(() => lodash.groupBy(records.value, x => x.worker?.id))
const scheduleModels = computed(() => {
  return Object.values(recordsGrouped.value).map(arr => new ScheduleModel(arr))
})
const workers = computed(() => scheduleModels.value.filter(x => !x.left()).map(x => x.worker()))

const checked = ref([] as boolean[])
watch(workers, () => {
  checked.value = new Array(workers.value.length)
  for (let i=0;i<checked.value.length;i++) {
    checked.value[i] = false
  }
})

const allChecked = ref(false)
watch(allChecked, (val) => {
  for (let i=0;i<checked.value.length;i++) {
    checked.value[i] = val
  }
})

function submit() {
  const workersChecked: ContactModel[] = []
  checked.value.forEach((v, i) => {
    if (v) {
      workersChecked.push(workers.value[i])
    }
  })
  const batch = workersChecked.map(worker => {
    const r = new JobRecordModel()
    r.worker = worker
    r.date = pauseDate.value
    r.action = JobAction.Pause
    r.actionParams = [Number.parseInt(pauseDays.value.toString())]
    return r
  })
  JobRecordApi.pauseBatch(batch)
    .then((ok) => {
      if (ok) {
        showSuccessToast('添加成功')
        router.back()
      }
      else {
        showFailToast('删除失败，请联系管理员')
      }
    })
}

async function switchDate() {
  const res = await pickDate(pauseDate.value)
  if (res) {
    pauseDate.value = res
  }
}



</script>

<template>
  <div of-hidden>
    <NavBar
      title="批量请假"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    
    <div paper p2 m2>
      <Checkbox shape="square" v-model="allChecked" mb2>
        全选
      </Checkbox>
      <div b-t="1px solid #cccccccc" pt2>
        <Checkbox shape="square" v-for="(item, index) in workers" :key="index" mb2  v-model="checked[index]">
          {{ item.name }}
        </Checkbox>
      </div>
    </div>
    <Field
      v-model="pauseDays"
      label="请假天数"
      type="digit"
      input-align="right"
    />

    <PairsView
      :pairs="[
        [
          '日期',
          moment(pauseDate).format('YYYY/MM/DD'),
          switchDate,
        ],
      ]"
      mb='18'
    />

    <ActionBar>
      <ActionBarButton type="primary" text="提交" @click="submit" />
    </ActionBar>
  </div>
</template>

<style scoped></style>

<route lang="yaml">
meta:
  title: 工人列表
</route>
